{# 继承母版页basic #}
{% extends 'basic.html' %}
{% load static %}

{# 自定义标题 #}
{% block title %}
    我的博客|首页
{% endblock %}

{# 自定义样式 #}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/home.css' %}">
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
{% endblock %}

{# 导航条选中 #}
{% block nav_home_active %} active {% endblock %}

{# 自定义内容 #}
{% block content %}
    <h3 class="home-content">这是首页，请随便查看！</h3>
    <!-- 图表容器 DOM -->
    <div id="container" style="width: 600px;height:400px;"></div>
    <!--热门博客-->
    <div class="hot-blog">
        <h3>今天热门点击</h3>
        <ul>
            {% for hot_blog in today_hot_blog %}
                <a href="{% url 'blog_detail' hot_blog.content_object.pk %}">
                    {{ hot_blog.content_object.title }}
                </a>
                ({{ hot_blog.read_num }})
            {% empty %}
                <li>今天暂时没有热门博客</li>
            {% endfor %}
        </ul>
        <h3>昨天热门点击</h3>
        <ul>
            {% for hot_blog in yesterday_hot_blog %}
                <a href="{% url 'blog_detail' hot_blog.content_object.pk %}">
                    {{ hot_blog.content_object.title }}
                </a>
                ({{ hot_blog.read_num }})
            {% empty %}
                <li>昨天暂时没有热门博客</li>
            {% endfor %}
        </ul>
        <h3>七天热门点击</h3>
        <ul>
            {% for hot_blog in hot_blogs_for_7_days %}
                <a href="{% url 'blog_detail' hot_blog.id %}">
                    {{ hot_blog.title }}
                </a>
                ({{ hot_blog.read_num_sum }})
            {% empty %}
                <li>昨天暂时没有热门博客</li>
            {% endfor %}
        </ul>
    </div>

{% endblock %}

{# 自定义js #}
{% block js %}
    <script>
        // 图表配置
        var options = {
            chart: { type: 'line' },
            title: { text: null},
            xAxis: {
                categories: {{ dates|safe }},
                title: {text: "前7日阅读量变化"}
            },
            yAxis: {
                title: { text: null },
                labels:{ enabled: false },
                gridLineDashStyle:'Dash' {# 虚线 #}
            },
            series: [{
                name: "阅读量",
                data: {{ read_nums }}
            }],
            plotOptions:{
                line:{
                    dataLabels:{
                        enabled: true
                    }
                }
            },
            legend:{ enabled: false },  {# 图例 #}
            credits:{ enabled: false }, {# 版权信息 #}
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
{% endblock %}